
import React from 'react';
import css from './index.less';
import { Collapse, Pagination, Modal, Upload } from 'antd';
import LogGroup from 'components/config/zoho/logGroup';
import InnerGroup from 'components/config/zoho/innerGroup';
import Icon from 'components/icon';
import Inner from './inner';
import ajax from 'common/utils/ajax';
import indexOf from 'lodash/indexOf';
import menu from 'common/config';

class Catalog extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
      translate: 0,
      current: 1,
      selected: [],
      chooseLog: [],
      chooseUrl: '',
      total: 100,
      height: 0,
      color: '',
      show: false,
      isRadio: true,
    };

  }

  componentDidMount() {

  }

  renderLeft() {
    const {isActive, color} = this.state;
    const collapseProps = {
      bordered: false,
      defaultActiveKey: ['0', '1', '2'],
      className: css.body,

    };

    const { menuList } = menu;
    const { list } = menuList;
    return (
      <Collapse onChange={this.callback.bind(this)} {...collapseProps}>
        {
          list.map( (items, index) => {
            const props = {
              title: items.title,
              key: index,
              id: items.id,
              isActive: isActive,
            };
            return (<LogGroup {...props}>
              {
                items.list.map((item, ind) => {
                  // console.log('item===', item.list);
                  const subProps = {
                    title: item.title,
                    key: ind,
                    id: item.id,
                  };
                  return (<Collapse bordered={false} key={ind} defaultActiveKey="0"><LogGroup {...subProps}>
                    {
                      item.list.map((it, i) => {
                        const innerProps = {
                          title: it.title,
                          key: i,
                          id: it.id,
                          readOnly: color == it.id ? false : true,
                          showImg: this.showImg.bind(this),
                          style: {
                            color: color === it.id ? 'blue' : ''
                          }
                        };
                        return <InnerGroup {...innerProps}/>;
                      })
                    }
                  </LogGroup></Collapse>);
                })
              }
            </LogGroup>);
          })
        }
      </Collapse>

    );
  }

  callback(key) {
    this.setState({
      isActive: !this.state.isActive,
    });
  }

  showImg(id) {
    ajax.req({
      url: 'picture.getPicList',
      params: {
        page: 1,
        pageSize: 20
      }
    }).then(res => {
      res.list.forEach(item => {
        if (id === item.id || id == item.id) {
          this.setState({
            selected: item.list,
            total: item.total,
            height: 570 * Math.ceil(item.total / 18),
            chooseLog: [],
            color: id,
          });
        }
      });

    });
    this.onChange(this.state.current);

  }

  renderCenter() {
    const {translate, selected, total, height, chooseLog, current, isRadio} = this.state;

    const pagProps = {
      total: Math.ceil(total / 18) * 10,
      itemRender: this.itemRender.bind(this),
      onChange: this.onChange.bind(this),
      current: current,
      style: {
        position: 'absolute',
        left: 500,
        top: 600,
      }
    };

    const ulProps = {
      style: {
        transform: `translateY(${translate}px)`,
        height: height,
      }
    };

    return (
      <div>
        <div className={css.imgView}>
          <ul {...ulProps}>
            {
              selected.map((mod, index) => {
                let props = {
                  mod: mod,
                  key: mod.id, // key是唯一标识，用index会重复
                  ind: index,
                  getData: this.getData.bind(this),
                  chooseLog: chooseLog,
                  radio: isRadio,
                };
                return <Inner {...props}/>;
                // return this.renderCard(mod, mod.id);
              })
            }
          </ul>
        </div>
        <Pagination {...pagProps} />
      </div>
    );
  }

  // renderCard(mod, id) {
  //
  // }



  getData(box) {
    const {chooseLog} = this.state;
    let choose = chooseLog;
    let chooseImg = [];

    chooseLog.forEach(item => {
      chooseImg.push(item.id);
    });
    let ind = indexOf(chooseImg, box.id);
    if (ind !== -1) {
      choose.splice(ind, 1);
    } else {
      choose.push(box);
    }

    let chooseUrl = '';
    choose.forEach( item => {
      chooseUrl = item.img;
    });


    this.setState({
      chooseLog: choose,
      chooseUrl: chooseUrl,
    });

  }

  onChange(current) {
    // console.log('current', current);
    this.setState({
      translate: -570 * (current - 1),
      current: current,
    });
  }

  itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a><Icon type="left"/></a>;
    } else if (type === 'next') {
      return <a>下一页<Icon type="right"/></a>;
    }
    return originalElement;
  }

  getIt() {

    // console.log('this.chooseLog', this.state.chooseLog);

  }

  onShow() {
    this.setState({
      show: true,
    });
  }

  onHide() {
    this.setState({
      show: false,
    });
  }

  changeRadio() {
    this.setState({
      isRadio: !this.state.isRadio,
    });
  }

  render() {
    const { show, chooseLog, chooseUrl, isRadio } = this.state;
    const { onChange } = this.props;
    // console.log('this.state.show', chooseLog[0]);
    const modalProps = {
      visible: show,
      width: 1140,
      title: null,
      footer: null,
      onCancel: (e) => {
        e.stopPropagation();
        this.onHide();
      },
    };
    const props = {
      onClick: this.onShow.bind(this),
      style: {
        ...this.props.style,
      }
    };
    // chooseLog.img这里有问题
    const showProps = {
      onClick: (e) => {
        e.stopPropagation();
        onChange && onChange(chooseUrl, {
          src: chooseUrl,
        });
        this.onHide();
      }
    };

    return (
      <span {...props}>
          {this.props.children}
          <Modal {...modalProps}>
            <div className={css.layout}>
              <div>
                {this.renderLeft()}
              </div>
              <div>
                {this.renderCenter()}
              </div>
              <div className={css.right}>
                <div onClick={this.changeRadio.bind(this)}>{isRadio ? <span>单选</span> : <span>多选</span>}</div>
                <div {...showProps}>确定</div>
              </div>
            </div>
          </Modal>
        </span>
    );
  }
}
export default Catalog;
